<template>
  <div>
    <el-select style="width: 100% "
               v-model="orgData"
               size="small"
               multiple
               collapse-tags
               filterable
               collapse-tags-tooltip
               placeholder="请选择"
               :filter-method="dataFilter"
               @change="sendMsg()" >
      <div class="select_up">
        <el-button type="text" v-on:click="selectAll">
          <i class="el-icon-circle-check" />
          全选</el-button>
        <el-button type="text" v-on:click="removeTag">
          <i class="el-icon-close" />
          清空</el-button>
        <el-button type="text" v-on:click="selectReverse">
          <i class="el-icon-copy-document" />
          反选</el-button>
      </div>
      <div class="select_list">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </div>
    </el-select>

  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      required: []
    },
    userList: {
      type: Array,
      required: []
    },
    options: {
      type: Array,
      required: []
    },
  },
  watch: {
    //监听value变化（slect控件不是必要，暂时不明）
    value(newValue, oldValue) {
      this.orgData = newValue;
    }
  },
  data() {
    return {
      orgData: [],//选中数据
    }
  },
  methods: {
    //用户列表----start
    //清空操作
    removeTag() {
      this.orgData = []
    },

    //反选操作
    selectReverse(val) {
      val = []
      this.options.map(item => {
        let index = this.orgData.indexOf(item.value);
        //判断现有选中数据是否包含如果不包含则进行反选数据
        if (index != -1) {
        } else {
          val.push(item.value)
        }
      })
      this.orgData = val
    },
    //全选操作

    selectAll(){
      this.options.map((item)=>{
        if(!this.orgData.includes(item.value)){
          this.orgData.push(item.value)
        }
      })
    },
    dataFilter(query) {
      // this.value = val //给绑定值赋值
      // if(query == ''){
      //   //val不存在还原数组
      //   this.options= this.userList
      // }else{
      //   let result = [] //存储符合条件的下拉选项
      //   this.userList.forEach(val=>{
      //     if(val.label.indexOf(query)!=-1) result.push(val)
      //   })
      //   this.options = result
      // }
    },
    //用户列表----end

    sendMsg(){
      //input是默认双向绑定事件，select控件也可以用input给父组件传递数据
      console.log(this.orgData)
      this.$emit('input',this.orgData)
    }
  }
}
</script>
<style scoped lang="scss">
.el-select-dropdown__list {
  height: 100%;
  overflow: hidden;

}

.select_up {
  padding: 0 14px;
  font-size: 14px;
  position: absolute;
  z-index: 99999;
  background-color: white;
  top: 0px;
  width: 100%;
  border-radius: 5px 5px 0 0;

  ::v-deep .el-button {
    color: #bcbcbc;
    font-size: 14px;

    i {
      font-size: 14px;
    }
  }

  ::v-deep .el-button:hover {
    color: #409EFF;
  }

  .el-button+.el-button {
    margin-left: 6px;
  }
}

.select_list {
  margin-top: 25px;
}
</style>
